<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_CSS选择器</title>
    <style>
      /* 1.标签选择器:选中此标签名对应的所有元素 */
      h4{color: red;}
      /* 2.id选择器:选中id属性值为xxx的元素 */
      #d1{width:100px;height:100px;background-color: aqua;}
      /* 3.类选择器:选中class属性值为xxx的元素 */
      .msg{color: white;}
      .error{background-color: red;}
      .success{background-color: green;}
      /* 4.伪类选择器：选中元素的某种状态*/
      a:link{/* 超链接未被访问过的状态 */ color: gray;}
      a:visited{/* 超链接已被访问过的状态 */ color: green;}
      a:hover{/* 鼠标悬停在超链接上 */ color: orange;}
      a:active{/* 鼠标按下超链接 */ color: red;}
      /* 5.并列选择器：必须紧挨在一起写，表示同时满足两个选择器条件才会生效，是“与”的关系*/
      #d1:hover{background-color: yellow;}
      /* 6.群组选择器:用逗号隔开，只要满足其中一个选择器的条件就会生效，是“或”的关系 */
      h4,#d1,.error{border: 5px solid black;}
      /* 7.后代选择器:选中包含在此元素中的所有后代元素（子 孙 重孙...）*/
      #d2 span{background-color: purple;}
      /* 8.自带选择器：选中当前元素的直接子元素，不会继续向下选择 */
      #d2>div>p>span{color: white;}
    </style>
</head>
<body>
  <div>我是div</div>
  <div id="d1">我是div</div>
  <p>我是p</p>
  <h4>我是标题</h4>
  <h4>我是标题</h4>
  <hr></hr>

  <span class="error msg">用户名已被占用</span>
  <span class="error msg">密码格式不正确</span>
  <span class="error msg">非法的手机号</span><br>
  <span class="success msg">用户名可以使用</span>
  <span class="success msg">两次输入密码一直</span>
  <span class="success msg">手机号可以使用</span>
  <hr></hr>

<a href="http://www.baidu.com">百度一下</a>
<a href="abc">超链接</a>
  <hr>

<div id="d2">
  <span>111</span>
  <div>
    <span>222</span>
    <p>测试文字</p>
    <p>测试<span>333</span>文字</p>
  </div>
  <span>444<</span>
</div>

</body>
</html>